<template>
  <div class="taskGroup">
    <div class="title">
      <div style="width: 170px; display: flex; align-items: center">
        <el-button style="margin: 0 10px 0 5px" @click="handleSave" v-if="(isMyCaeate || isOtherDesiger) && canEdit">保存</el-button>
        <!-- <el-button
          style="margin-left: 20px"
          slot="reference"
          @click="handleCheckIsLock"
          v-if="canEdit"
          >{{
            currData.state === "已发布" || currData.state === "已修改未发布"
              ? "再次发布"
              : "发布任务"
          }}</el-button
        > -->
        <el-popconfirm
          title="是否发布任务组？已开设课程数据将与当前更新数据同步"
          @confirm="handlePubGroup"
          ref="popPub"
          v-if="(isMyCaeate || isOtherDesiger) && canEdit && isContinuousPublish && currData"
        >
          <el-button style="margin: 0 10px 0 5px" slot="reference">{{
            "发布任务组"
          }}</el-button>
        </el-popconfirm>
        <el-checkbox
          v-model="saveTask"
          label="同时发布任务"
          v-if="(isMyCaeate || isOtherDesiger) && canEdit && isContinuousPublish"
        />
      </div>
      <div>
        {{ (isMyCaeate || isOtherDesiger) && canEdit ? "正在编辑任务组" : "正在浏览任务组" }}
      </div>
      <div class="weightBox">
        任务权重：
        <el-input
          type="text"
          :maxlength="3"
          :max="100"
          v-model="currData.weightInCourse"
          onkeyup="this.value=this.value.replace(/[^\d%]$/g,'');"
          placeholder=""
          key="weightBox"
          @input="handelChange('weightInCourse')"
          :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
        >
        </el-input>
      </div>
    </div>
    <div class="contentBox">
      <div class="taskGroupEdit" :key="currGroupIndex">
        <div class="inputTips" v-if="(isMyCaeate || isOtherDesiger) && canEdit">
          <div title="必填">
            <span class="mustInput">*</span>
            为必填项
          </div>
          <!-- <div title="选填">
            <span class="choiceInput">*</span>
            为选填项
          </div> -->
        </div>
        <div class="infoBox">
          <div class="headBox">
            <div class="taskGroupIconBox">
              <div
                class="startMustTips"
                title="必填"
                v-if="(isMyCaeate || isOtherDesiger) && canEdit && currData.iconPath == ''"
              >
                *
              </div>
              <uploadIcon
                @uploadDataChange="uploadDataChange"
                :parentIconList="parentIconList"
                :currData="currData"
                :isMyCaeate="isMyCaeate"
                :isOtherDesiger="isOtherDesiger"
                :canEdit="canEdit"
                key="cover"
                :saveName="'taskGroupIcon'"
              />
            </div>
            <div class="taskGroupNameBox">
              <div
                class="startMustTips"
                title="必填"
                v-if="(isMyCaeate || isOtherDesiger) && canEdit && currData.name == ''"
              >
                *
              </div>
              <div class="inputName">任务组名称</div>
              <el-input
                v-model="currData.name"
                placeholder="请输入任务组名称"
                key="taskGroupNameBox"
                @input="handelChange('name')"
                :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
                :maxlength="300"
                show-word-limit
              ></el-input>
            </div>
          </div>
          <div class="taskGroupDesc">
            <!-- <div
              class="startChoiceTips"
              title="选填"
              v-if="isMyCaeate && canEdit && currData.description == ''"
            >
              *
            </div> -->
            <div class="inputName">任务组描述</div>
            <el-input
              type="textarea"
              placeholder="请输入任务组描述（允许空）"
              v-model="currData.description"
              key="taskGroupDesc"
              @input="handelChange('description')"
              :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
              :maxlength="300"
              show-word-limit
            >
            </el-input>
          </div>
        </div>
        <!-- <memo
          :currData="currData"
          @remarkChange="remarkChange"
          :isMyCaeate="isMyCaeate"
          :canEdit="canEdit"
        /> -->
      </div>
    </div>
  </div>
</template>

<script>
// import memo from "./remarks";
import uploadIcon from "@/components/uploadFile/uploadIcon";
import {
  createGroup,
  updateGroup,
  publishDesigncourse,
  updatedesigncourse,
} from "@/request/designcourse";
import { mapState } from "vuex";

export default {
  components: {
    // memo,
    uploadIcon,
  },
  data() {
    return {
      taskGroupInfo: {
        iconPath: "", // 图标
        name: "", // 名称
        memo: "", // 备注
        weightInCourse: 10, // 任务组权重
        description: "", // 任务组描述
        groupNoInCourse: 1, // 任务组编号
        tasks: [], // 任务列表
        // 默认图标
      },
      saveTask: false, // 同时同步任务
    };
  },
  props: {
    currGroupIndex: Number,
    currData: {
      type: Object,
      default: () => {
        return {
          // state: ''
        };
      },
    },
    isMyCaeate: Boolean, // 是否自己设计的
    isOtherDesiger: Boolean, // 是否是其它课程设计师
    canEdit: Boolean, // 当前课程状态可否编辑
    parentIconList: Array, // 默认icon
    isContinuousPublish: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    // 值发生改变
    handelChange(FieldName) {
      // if (this.currData.state === "完全同步") {
      //   this.currData.state = "未完全同步";
      // }
      this.$emit(
        "handelChange",
        {
          currData: this.currData,
          currGroupIndex: this.currGroupIndex,
        },
        "taskGroup",
        FieldName
      );
      // debugger;
      this.$forceUpdate();
    },
    // 文件变化
    uploadDataChange(fileList) {
      this.currData.iconPath = fileList.url;
      this.handelChange("iconPath");
    },
    // 备注发生变化
    remarkChange(val) {
      this.currData.memo = val;
      // 将数据提交到 数据源组件
      this.handelChange("memo");
    },
    handleCheckIsLock() {
      if (this.currData.isLockedForPublish) {
        this.$message({
          type: "warning",
          message: "任务组已上锁，请点击图标开锁！",
        });
      }
    },
    // 发布任务组
    async handlePubGroup() {
      if (!this.$route.query.courseID) {
        this.$antdMessage.error({
          content: "课程未创建、请保存课程信息！",
        });
        return;
      }
      // 任务组未创建
      if (!this.currData.taskGroupID) {
        // let isCreate = await this.handleCreateGroup();
        let isCreate = await this.$parent.updateCourseInfo(
          this.$route.query.courseID
        );
        let currData =
          this.$parent.courseDetailData.content[this.currGroupIndex];
        this.$nextTick(() => {
          this.$parent.handelChangePage(
            "taskGroup",
            currData,
            this.currGroupIndex,
            null
          );
        });
        // this.$set(this.$parent, 'currData', this.$parent.courseDetailData.content[this.currGroupIndex].tasks[this.currTaskIndex])
        this.$forceUpdate();
        if (isCreate) this.$parent.isSave = true;
        if (!isCreate) return;
      }
      // 课程已创建 未保存并且任务已存在 先保存任务组
      if (
        !this.$parent.isSave &&
        this.$route.query.courseID &&
        Number(this.currData.taskGroupID)
      ) {
        let isSave;
        if (this.saveTask) {
          // isSave = await this.handleCreateGroup();
          isSave = await this.$parent.updateCourseInfo(
            this.$route.query.courseID
          );
          let currData =
            this.$parent.courseDetailData.content[this.currGroupIndex];
          this.$nextTick(() => {
            this.$parent.handelChangePage(
              "taskGroup",
              currData,
              this.currGroupIndex,
              null
            );
          });
          // this.$set(this.$parent, 'currData', this.$parent.courseDetailData.content[this.currGroupIndex].tasks[this.currTaskIndex])
          this.$forceUpdate();
        } else {
          // isSave = await this.handleSaveGroup();
          isSave = await this.$parent.updateCourseInfo(
            this.$route.query.courseID
          );
          let currData =
            this.$parent.courseDetailData.content[this.currGroupIndex];
          this.$parent.handelChangePage(
            "taskGroup",
            currData,
            this.currGroupIndex,
            null
          );
          // this.$set(this.$parent, 'currData', this.$parent.courseDetailData.content[this.currGroupIndex].tasks[this.currTaskIndex])
          this.$forceUpdate();
        }
        if (!isSave) return;
      }
      let params = {
        courseID: Number(this.$route.query.courseID),
        userID: Number(this.userInfo.userID),
        taskGroupID:
          this.$parent.courseDetailData.content[this.currGroupIndex]
            .taskGroupID,
        noSubset: this.saveTask ? false : true, // noSubset为flase 同时发布任务0
      };
      if (!params.courseID) {
        this.$antdMessage.error({
          content: "课程未创建、请保存课程信息！",
        });
        return;
      }
      if (!params.taskGroupID) {
        if (this.currData.taskGroupID) {
          params.taskGroupID = this.currData.taskGroupID;
        } else {
          this.$antdMessage.error({
            content: "任务组信息获取失败！",
          });
          return;
        }
      }
      params.tasks = undefined;
      params.updateFieldName = undefined;
      publishDesigncourse(params).then((res) => {
        if (res.errno === 0) {
          this.$antdMessage.success({
            content: "任务组发布成功!",
          });
          this.saveTask && this.$emit('handlePublishedTaskGroup', params.taskGroupID)
        } else {
          this.$antdMessage.error({
            content: res.message || "任务组发布失败！",
          });
        }
      });
    },
    handleSaveGroup() {
      return new Promise((resolve, reject) => {
        let saveGroupParams = Object.assign({}, this.currData);
        saveGroupParams.courseID = Number(this.$route.query.courseID);
        saveGroupParams.weightInCourse = Number(saveGroupParams.weightInCourse);
        saveGroupParams.groupNoInCourse = this.currGroupIndex + 1;
        saveGroupParams.taskTotal = saveGroupParams.tasks.length;
        // 清空多余的参数
        saveGroupParams.memo = undefined;
        saveGroupParams.state = undefined;
        saveGroupParams.tasks = undefined;
        saveGroupParams.updateFieldName = undefined;
        let nSaveGroupParams = {
          courseID: Number(this.$route.query.courseID),
          taskGroups: {},
        };
        if (!nSaveGroupParams.courseID) {
          this.$antdMessage.error({
            content: "获取课程参数失败！",
          });
          return;
        }
        nSaveGroupParams.taskGroups[saveGroupParams.taskGroupID] =
          saveGroupParams;
        updatedesigncourse(nSaveGroupParams).then((res) => {
          // 成功不提示 任务组保存成功 只有失败才提示 因为用户的操作只有一步
          if (res.errno === 0) {
            resolve(true);
          } else {
            this.$antdMessage.error({
              content: "任务组更新失败！",
            });
            resolve(false);
          }
        });
      });
    },
    handleSave() {
      this.$emit("handleSave")
    }
    // handleCreateGroup() {
    //   return new Promise((resolve, reject) => {
    //     let params = JSON.parse(JSON.stringify(this.$parent.courseDetailData));
    //     params["courseID"] = Number(this.$route.query.courseID);
    //     params.taskGroupTotal = this.$parent.groupCount;
    //     params.taskTotal = this.$parent.taskCount;
    //     params.memo = undefined;
    //     params.taskGroups = {};
    //     // 记录当前课程 无任务组ID的编号
    //     let markNoGroupId_Num = 1;

    //     params.content.map((item, index) => {
    //       item.courseID = Number(this.$route.query.courseID);
    //       item.weightInCourse = Number(item.weightInCourse);
    //       item.groupNoInCourse = index + 1;
    //       item.memo = undefined;
    //       item.state = undefined;
    //       item.taskTotal = item.tasks.length;
    //       // 定义新的存放任务的属性
    //       let newTasks = {};
    //       // 记录当前任务组 无任务ID的编号
    //       let markNoTaskId_Num = 1;

    //       item.tasks.map((titem, tindex) => {
    //         titem.courseID = Number(this.$route.query.courseID);
    //         titem.weightInGroup = Number(titem.weightInGroup);
    //         titem.taskNoInGroup = tindex + 1;
    //         titem.memo = undefined;
    //         titem.id = undefined;
    //         titem.guidelineTotal = titem.guidelines.length;

    //         // 找到最大ID
    //         let maxID = titem.guidelines
    //           .map((gitem, index) => {
    //             if (gitem.guidelineID) {
    //               return gitem.guidelineID;
    //             }
    //           })
    //           .filter((gitem) => gitem)
    //           .reverse()[0];
    //         maxID = !maxID && maxID !== 0 ? 0 : maxID;

    //         let newGuideline = {};
    //         titem.guidelines.map((gitem, gindex) => {
    //           gitem.weightInTask = Number(gitem.weightInTask);
    //           gitem.noInTask = gindex + 1;
    //           gitem.memo = undefined;
    //           gitem.id = undefined;
    //           gitem.questionGroupDetail = undefined;
    //           gitem.state = undefined;
    //           if (gitem.guidelineID > maxID && gitem.guidelineID) {
    //             maxID = gitem.guidelineID;
    //           }
    //           if (!gitem.guidelineID) {
    //             gitem.guidelineID = maxID + 1;
    //             maxID++;
    //           }

    //           // 将引导文记录到对象中
    //           newGuideline[gitem.guidelineID] = gitem;
    //           // if (tindex === 2) {
    //           // }
    //         });

    //         // 将对象类型的的引导文 赋值到guidelines
    //         titem.guidelines = newGuideline;

    //         titem.taskGroupID = item.taskGroupID ? item.taskGroupID : undefined;

    //         // 过滤任务未修改的字段    需要处理所有字段未修改
    //         if (titem.updateFieldName.length > 3 || !titem.taskID) {
    //           let markTitem = Object.assign({}, titem);
    //           titem = {};
    //           if (!markTitem.taskID) {
    //             titem = markTitem;
    //             titem.taskID = undefined;
    //           } else {
    //             markTitem.updateFieldName.forEach((fitem) => {
    //               titem[fitem] = markTitem[fitem];
    //             });
    //           }
    //           // 记录修改了任务字段，让任务组过滤未修改的字段时，保留tasks字段
    //           item.updateFieldName.push("tasks");
    //         } else if (titem.updateFieldName.length === 3 && titem.taskID) {
    //           this.$set(titem, "unAddTonewTasks", true);
    //         }
    //         // 删除updateFieldName属性
    //         titem.updateFieldName = undefined;
    //         if (titem && !titem.unAddTonewTasks) {
    //           if (titem.taskID) {
    //             newTasks[titem.taskID] = titem;
    //           } else {
    //             titem.taskID = undefined;
    //             newTasks[`newtask${markNoTaskId_Num}`] = titem;
    //             titem["groupNoInCourse"] = item.groupNoInCourse;
    //             markNoTaskId_Num++;
    //           }
    //         }
    //       });
    //       // 将格式化的数据 赋值到tasks
    //       item.tasks = Object.assign({}, newTasks);
    //       newTasks = undefined;

    //       // 过滤任务组未修改的字段
    //       if (item.updateFieldName.length > 2 || !item.taskGroupID) {
    //         let markItem = Object.assign({}, item);
    //         item = {};
    //         if (!markItem.taskGroupID) {
    //           item = markItem;
    //           item.taskGroupID = undefined;
    //         } else {
    //           markItem.updateFieldName.forEach((fitem) => {
    //             item[fitem] = markItem[fitem];
    //           });
    //         }
    //       } else if (item.updateFieldName.length === 2) {
    //         this.$set(item, "unAddTotaskGroups", true);
    //       }
    //       // 删除updateFieldName属性
    //       item.updateFieldName = undefined;

    //       if (item && !item.unAddTotaskGroups) {
    //         // 将格式化后的任务组数据赋值到 taskGroups属性中
    //         if (item.taskGroupID) {
    //           params.taskGroups[item.taskGroupID] = item;
    //         } else {
    //           item.taskGroupID = undefined;
    //           params.taskGroups[`newgroup${markNoGroupId_Num}`] = item;
    //           markNoGroupId_Num++;
    //         }
    //       }

    //       // 如果任务组字段taskGroups 含有任务组对象 则在课程信息字段过滤时 保留taskGroups
    //       if (Object.keys(params.taskGroups).length)
    //         params.updateFieldName.push("taskGroups");
    //     });
    //     params.taskGroups = Object.keys(params.taskGroups).length
    //       ? params.taskGroups
    //       : undefined;
    //     params.content = undefined;
    //     params.delTaskGroupIDs = params.delTaskGroupIDs.length
    //       ? params.delTaskGroupIDs
    //       : undefined;
    //     params.delTaskIDs = params.delTaskIDs.length
    //       ? params.delTaskIDs
    //       : undefined;

    //     // 过滤课程信息未修改的字段
    //     if (params.updateFieldName.length > 1 || !params.taskGroupID) {
    //       let markItem = Object.assign({}, params);
    //       params = {};
    //       markItem.updateFieldName.forEach((fitem) => {
    //         params[fitem] = markItem[fitem];
    //       });
    //     }
    //     // 删除updateFieldName属性
    //     params.updateFieldName = undefined;

    //     updatedesigncourse(params)
    //       .then((res) => {
    //         if (res.errno === 0) {
    //           this.$antdMessage.success({
    //             content: "课程信息已更新",
    //           });
    //           // this.$parent.isSave = true;
    //           // if (res.data !== true) {
    //           //   this.$parent.formtCourseData(res.data);
    //           // }
    //           this.$parent.handleSetGourpInCourseAndTaskInGroup();
    //           Object.keys(res.data.taskGroups).filter((item) => {
    //             // debugger;
    //             if (
    //               res.data.taskGroups[item].groupNoInCourse ===
    //               this.currData.groupNoInCourse
    //             ) {
    //               this.currData.taskGroupID = Number(item);
    //               // this.currData.courseID = Number(this.$route.query.courseID);
    //               // let newCurrDataObj = Object.assign({}, this.currData);
    //               // let newCurrDataTaskArr = [];
    //               // this.currData.tasks.map((titem, tindex) => {
    //               //   if (!titem.taskID) {
    //               //     Object.keys(res.data.taskGroups[item].tasks).forEach(
    //               //       (ntitem) => {
    //               //         if (
    //               //           titem.taskNoInGroup ===
    //               //           res.data.taskGroups[item].tasks[ntitem]
    //               //             .taskNoInGroup
    //               //         ) {
    //               //           titem.taskGroupID = Number(item);
    //               //           titem = res.data.taskGroups[item].tasks[ntitem];
    //               //           titem["id"] = new Date().getTime();
    //               //           titem["updateFieldName"] = [
    //               //             "courseID",
    //               //             "taskGroupID",
    //               //             "taskID",
    //               //             "taskNoInGroup",
    //               //           ];
    //               //           titem["state"] = "未发布";
    //               //         }
    //               //       }
    //               //     );
    //               //   }
    //               //   newCurrDataTaskArr.push(titem);
    //               //   // debugger
    //               // });
    //               // newCurrDataObj['tasks'] = newCurrDataTaskArr
    //               // newCurrDataObj.updateFieldName = ["courseID","taskGroupID","groupNoInCourse"]
    //               // newCurrDataObj.isSyncToPublic = null
    //               // this.currData = Object.assign({}, newCurrDataObj)
    //               // this.$set(this.currData,'tasks', newCurrDataTaskArr)
    //               // this.currData.tasks = newCurrDataTaskArr
    //               // this.$set(this.$parent,'currData', newCurrDataObj)
    //               // this.$forceUpdate()
    //               // debugger
    //               // this.$nextTick(() => {
    //                 // this.handelChange("taskGroupID");
    //               // });
    //               // debugger
    //             }
    //           });
    //           // debugger
    //           resolve(true);
    //           this.$parent.fetchDesignCourseData({id:25})
    //         } else {
    //           this.$antdMessage.error({
    //             content: res.message || res,
    //           });
    //           resolve(false);
    //         }
    //       })
    //       .catch((err) => {
    //         resolve(false);
    //       });
    //   });
    // },
  },
};
</script>

<style lang="stylus">
$boderColor = solid 1px #b7b2b2;

.taskGroup {
  padding-bottom: 25px;
  max-width: 850px;
  background-color: #eaeef3;
  box-shadow: 6px 8px 10px 0px rgba(0, 0, 0, 0.16);
  border-radius: 5px;

  // border: solid 1px #eaeef3;
  .title {
    padding: 17px 0 10px 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: PMingLiU-ExtB;
    font-weight: bold;
    font-size: 22px;
    color: #0a0a0a;

    .weightBox {
      // margin: 0 0 0 auto;
      height: 25px;
      width: 170px;
      font-family: PMingLiU-ExtB;
      font-size: 16px;
      color: #fed48c;

      .el-input {
        width: auto;

        .el-input__inner {
          padding: 0;
          width: 50px;
          height: 25px;
          line-height: 25px;
          border: none;
          border-radius: 0;
          background: transparent !important;
          border-bottom: 1px solid #707070;
          font-family: PMingLiU-ExtB;
          font-size: 16px;
          color: #707070;
        }
      }

      .is-disabled {
        background: transparent !important;
      }
    }
  }

  .contentBox {
    width: 850px;
    min-height: 865px;
    background-color: #ffffff;
    // box-shadow: 6px 8px 10px 0px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    border: solid 1px #eaedee;
  }

  .taskGroupEdit {
    padding: 11px 39px 11px 53px;

    .infoBox {
      .headBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100px;
        width: 100%;

        .taskGroupIconBox {
          position: relative;
          width: 100px;
          height: 100px;
          border-radius: 50%;

          .uploadComponent {
            .upload-demo {
              .el-upload {
                width: 100%;
                height: 100%;

                .uplaodControll {
                  border-radius: 50%;
                  border: none;
                  box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.16);
                }

                .iconBox {
                  img {
                    object-fit: cover;
                    width: 42px;
                    height: 40px;
                  }
                }

                .fileListBox {
                  width: 100%;
                  height: 100%;

                  .imgFileBox {
                    width: 100%;
                    height: 100%;

                    img {
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                    }
                  }
                }
              }
            }
          }
        }

        .taskGroupNameBox {
          position: relative;
          margin-left: 30px;
          flex: 1;
          height: 72px;
          background-color: #ffffff;

          .el-input {
            height: 100%;
            width: 100%;

            .el-input__inner {
              padding-left: 17px;
              height: 100%;
              width: 100%;
              text-align: center;
              border-radius: 10px;
              border: none;
              // box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.16);
              border: $boderColor;
              font-weight: bold;
              font-family: PMingLiU-ExtB;
              font-size: 20px;
              color: #0a0a0a;
            }
          }
        }
      }

      .taskGroupDesc {
        position: relative;
        margin-top: 50px;
        height: 200px;
        background-color: #ffffff;

        .el-textarea {
          height: 100%;

          .el-textarea__inner {
            resize: none;
            padding: 13px 11px;
            height: 100%;
            border: none;
            // box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.16);
            border: $boderColor;
            border-radius: 10px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #0a0a0a;
          }

          .el-textarea__inner::-webkit-scrollbar {
            width: 4px;
            height: 1px;
          }

          /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
          .el-textarea__inner::-webkit-scrollbar-thumb {
            -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
            background: #f9f9f9;
            border-radius: 10px;
          }

          /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
          .el-textarea__inner::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
            border-radius: 4px;
          }
        }
      }
    }

    .remarksCompontent {
      margin-top: 68px;
    }
  }
}
</style>